{include "INC_header.html" title="登陆控制面板"}
<div id="app-outlet" class="login-page">
    <!-- ant-design 应用需要配置 -->
    <a-config-provider :locale="config.locale" :theme="config.theme">
        <div class="form-border hover-background">
            <div class="ad-page">
                <!-- 预留广告图位置 -->
            </div>
            <div class="form" style="padding: 20px;">
                <div class="text-center text-small danger-text"><i class="fa fa-info-circle"></i> 登陆状态在浏览器关闭/超时后自动注销！</div>
                <div class="text-center margin-top padding-top">
                    <a-avatar class="justify-center auto-margin" :size="58">
                        <div class="justify-center"><i class="fa fa-user" style="font-size: 36px;"></i></div>
                    </a-avatar>
                </div>
                <div class="text-center padding-top">登陆控制面板</div>
                <div class="padding-top margin-top" style="flex: 1;">
                    <div class="field">
                        <div class="label">用户名</div>
                        <div class="">
                            <a-input ref="username" maxlength="32" v-model:value="username" placeholder="超管用户名" @keyup.enter="login">
                                <template #prefix><i class="fa fa-user margin-right"></i></template>
                            </a-input>
                        </div>
                    </div>
                    <div class="field">
                        <div class="label">登陆密码</div>
                        <div class="">
                            <a-input ref="password" type="password" maxlength="32" v-model:value="password" placeholder="登陆密码" @keyup.enter="login">
                                <template #prefix><i class="fa fa-key margin-right"></i></template>
                            </a-input>
                        </div>
                    </div>
                    <div class="field">
                        <a-button type="primary" :loading="loading" block @click="login">登陆</a-button>
                    </div>
                </div>
                <div class="text-right padding-top"><a :href="'{url url='/web/index' module='sso'}?redirect=' + redirectUrl">统一授权 <i class="fa fa-angle-right"></i></a></div>
            </div>
        </div>
        <!-- 背景 -->
        <!--
        <div class="background">
            <div class="column" v-for="c of 40">
                <div class="row" v-for="r of 15">

                </div>
            </div>
        </div>
        -->
    </a-config-provider>
</div>
<script>
    //vue app
    const { createApp } = Vue;
    const { message } = antd;
    const app = createApp({
        data() {
            return {
                //主题配置
                config: appProviderConfig,
                //数据
                username: "{$get.username|default:''}",
                password: "{$get.password|default:''}",
                loading: false,
                redirectUrl: ''
            }
        },
        mounted() {
            //挂载成功，检测是否已登陆超管账户
            const hide = message.loading("正在预检...");
            axios.get("{url url='/admin/api/user'}").then(({ data }) => {
                hide();
                if (data.error === 0) {
                    window.location.href = "{url url='/admin/admin'}";
                }
            }).catch(() => {
                hide();
            });
            const dfUrl = "{url url='/admin/admin'}";
            const url = "{$get.redirect|default:''}";
            this.redirectUrl = url.length > 0 ? url : dfUrl;
        },
        methods: {
            //方法
            login: function () {
                if (this.loading) {
                    return;
                }
                if (this.username.toString().length < 6) {
                    message.error("用户名长度至少6位");
                    return this.$refs.username.focus();
                }
                if (this.password.toString().length < 6) {
                    message.error("密码至少是6位长度");
                    return this.$refs.username.focus();
                }
                this.loading = true;
                let self = this;
                axios.post("{url url='/admin/api/auth'}", {
                    username: this.username,
                    password: this.password
                }).then(({ data }) => {
                    self.loading = false;
                    if (data.error === 0) {
                        message.success("授权成功");
                        window.location.href = self.redirectUrl;
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    self.loading = false;
                    message.error("服务端繁忙");
                });
            }
        }
    }).use(antd);
    //挂载
    const vm = app.mount("#app-outlet");
</script>
{include "INC_footer.html"}